<template>
  <div class="app-container">
    <el-form
      size="mini"
      :inline="true"
      label-width="150px"
      :model="formInline"
      class="demo-form-inline"
      :rules="rules"
    >
      <el-form-item label="Location" prop="region">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location" prop="region">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location" prop="region">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location" prop="region">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location" prop="region">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="info" icon="el-icon-search">search</el-button>
        <el-button size="mini" type="info" icon="el-icon-plus" @click.stop.prevent="addHandle">add-sensor</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="uploadSuccessHandle"
          :on-error="uploadErrorHandle"
        >
          <el-button size="mini" icon="el-icon-upload2" type="info">import-excel</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="info" icon="el-icon-download">export-excel</el-button>
        <el-button
          size="mini"
          icon="el-icon-delete"
          type="info"
          @click.stop.prevent="deleteHandle()"
        >deleteBatch</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      ref="tableData"
      v-loading="listLoading"
      size="mini"
      border
      style="width: 100%;"
      max-height="550"
      @selection-change="selectRow"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum"></el-table-column>
      <el-table-column prop="date" label="RunNum">
        <template slot-scope="scope">
          <!-- <el-tooltip effect="dark" content="add" placement="top">
            <span  @click.stop.prevent="addHandle(scope.row.id)">
              <i class="el-icon-plus"></i>
            </span>
          </el-tooltip>-->
          <el-tooltip effect="dark" content="delete" placement="top">
            <span @click.stop.prevent="deleteHandle2(scope.row.id)">
              <i class="el-icon-delete"></i>
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
    ></el-pagination>
  </div>
</template>

<script>
import { getList2 } from '@/api/table'
import { fetchComments } from '@/api/article'
export default {
  mounted: function(){
    this.fetchData();
  },
   data() {
    return {
      list: null,
      listLoading: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      formInline: {
        user: "",
        region: ""
      },
      controlPlanList: [],
      dataForm: {
        locationName: "", // Optional
        moduleName: "", // Optional
        toolGroupId: null,
        chamberGroupId: null,
        subRecipes: [],
        lotIds: [],
        waferIds: [],
        mesProducts: [],
        mesStages: [],
        mesLots: [],
        mesWafers: [],
        mesFlowRecipes: [],
        toolIds: [], // Optional
        chamberIds: [], // Optional
        datetimerange: [], // Optional, 开始日期, 结束日期
        selectRecent: 100,
        controlPlanId: null, // Optional
        chartReviewType: "indicator" // ChartReview 要显示的 Chart 类型: Indicator / RawTrace
      },
      // 选择列表行数据
      selectlistRow: [],
      tableData: [
        {
          rowNum: 1,
          date: "a",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          rowNum: 2,
          date: "b",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          rowNum: 3,
          date: "c",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          rowNum: 4,
          date: "d",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          rowNum: 5,
          date: "e",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          rowNum: 6,
          date: "f",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          rowNum: 7,
          date: "g",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          rowNum: 8,
          date: "h",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      rules: {
        region: [{ required: true, trigger: "blur" }]
      }
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList2().then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.tableData = this.list;
        console.log("this.list",this.list)
      })
    },
    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },
    handleSizeChange(val) {
      this.listLoading = true;
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      fetchComments().then(response => {
        this.list = response.data.items
        this.tableData = this.list;
        this.listLoading = false;
        console.log("this.list",this.list)
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listLoading = true;
      fetchComments().then(response => {
        this.list = response.data.items
        this.tableData = this.list;
        this.listLoading = false;
        console.log("this.list",this.list)
      });
    },
    uploadSuccessHandle() {},
    uploadErrorHandle() {},
    deleteHandle() {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if(this.selectlistRow.length == 0 ){
            this.$message({
            type: "success",
            message: "请选择一条信息!"
          });
          }else{
            for (let i = 0; i < this.selectlistRow.length; i++) {
            let val = this.selectlistRow;
            // 获取选中行的索引的方法
            // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
            // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
            val.forEach((val, index) => {
              this.tableData.forEach((v, i) => {
                if (val.rowNum === v.rowNum) {
                  // i 为选中的索引
                  this.tableData.splice(i, 1);
                }
              });
            });
          }
          // 删除完数据之后清除勾选框
          this.$refs.tableData.clearSelection();
          }
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteHandle2(i) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(i, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    addHandle() {
      this.list=
        {
          rowNum: "",
          date: "x",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
        this.tableData.unshift(this.list)
    }
  }
 
};
</script>
<style lang='scss' scoped>
</style>